<template>
  <h1>示例一</h1>
  <button @click="openDialog">打开dialog</button>
  <dialog-lib
    v-model:visible="visible"
    title="你好"
    :touchOverlayClose="false"
    :confirm="complete"
    :cancel="cancel"
  >
    <template v-slot:content>
      <h5>一行字...</h5>
      <h5>一行字...</h5>
    </template>
  </dialog-lib>
  <h1>示例二</h1>
  <button @click="showModel">打开dialog</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import DialogLib from "../lib/DialogLib.vue";
import openModel from "../lib/dialog";

export default defineComponent({
  components: { DialogLib },
  setup() {
    const visible = ref(false);

    const openDialog = () => {
      visible.value = true;
    };

    const complete = () => {
      visible.value = false;
      console.log("我点击了完成");
    };

    const cancel = () => {
      visible.value = false;
      console.log("我点击了取消");
    };
    const showModel = () => {
      openModel({
        title: "标题",
        content: "1111111111",
        touchOverlayClose: false,
        complete() {
          console.log("ji");
        },
        cancel() {
          console.log("ji");
        },
      });
    };

    return { visible, openDialog, complete, cancel, showModel };
  },
});
</script>
